
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>API配置</title>
    <link href="/static/devtools30/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/devtools30/css/devindexbase.css" rel="stylesheet" />
    <link href="/static/devtools30/layui-v2.5.6/ext/soulTable/soulTable.css" rel="stylesheet"/>

    <script src="/static/devtools30/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui-v2.5.6/layui.all.js" type="text/javascript"></script>
    <script src="/static/devtools30/layui-v2.5.6/layui.js" type="text/javascript"></script>
    <script src="/static/devtools30/js/devtoolCommon.js" type="text/javascript"></script>

    <style>
        /*-------------------------tab-------------------------*/
        .layui-tab {
            margin: 0;
        }
        /*边框*/
        .layui-tab-title {
            border-bottom-width: 3px;
            border-bottom-color: #f7f7f7;
        }
        /*字体*/
        .layui-tab-title li {
            font-size: 11px!important;
        }
        /*高度*/
        .tabwrap .layui-tab-title {
            height: 24px;
        }
        /*高度*/
        .tabwrap .layui-tab-title li {
            line-height: 24px;
        }
        /*高度*/
        .tabwrap .layui-tab-title .layui-this:after {
            height: 24px;
        }
        .layui-tab-title .layui-this:after {
            /*height: auto!important;*/
        }
        /*选中时样式*/
        .tabwrap .layui-tab-title .layui-this {
            color: white;
            background: #41BFC0;
        }
        /*关闭按钮样式*/

        .tabwrap .layui-tab-title li .layui-tab-close {
            color: #FFFFFF!important;
        }
        /*顶部搜索容器*/
        .tophead {
            height: 32px;
            /*border-bottom: 1px solid #F7F7F7;*/
            padding: 0 5px;
        }
        /*顶部输入框，下拉框去掉layui默认边距*/
        .tophead .layui-form-item {
            margin-bottom: 0px!important;
        }
        /*顶部输入框，下拉框左边文本样式*/
        .tophead .layui-form-label {
            padding: 0;
            line-height: 25px;
            width: auto;
        }
        /*顶部form块样式*/
        .tophead .layui-input-block {
            margin-left: 34px;
            min-height: 26px;
        }
        /*顶部输入框，下拉框设置高度*/
        .tophead .layui-input,
        .layui-select {
            height: 25px;
        }
        /*顶部下拉框设置子项高度*/
        .tophead .layui-form-select dl {
            top: 26px;
            padding: 0;
        }
        /*顶部下拉框设置子项内容高度*/
        .tophead .layui-form-select dl dd,
        .layui-form-select dl dt {
            line-height: 24px;
        }
        .tophead .layui-form-item {
            width: 165px;
        }
        /*顶部下拉框图标大小*/
        .tophead .layui-form-select .layui-edge {
            border-width: 4px;
        }
        /*搜索框左边距*/
        .tophead .search .layui-input-block {
            margin-left: 32px;
        }
        /*表格字体大小*/
        .layui-table td,
        .layui-table th {
            font-size: 11px!important;
        }
        /*表格边距*/
        .layui-table,
        .layui-table-view {
            margin: 0;
        }
        .tab0>li:nth-child(1) .layui-icon.layui-unselect.layui-tab-close,
        .tab0>li:nth-child(2) .layui-icon.layui-unselect.layui-tab-close {
            display: none;
        }
        .layui-btn {
            height: 26px;
            line-height: 26px;
            font-size: 11px;
        }
    </style>
</head>
<body>
<div>
    <div class="layui-tab tabwrap" lay-allowClose="true" lay-filter="tab" style="border-color: #f7f7f7;border-style: solid;">
        <!--<ul class="layui-tab-title" id="layui-tab-all" style="border: 1px solid #E6E6E6;background: #F5F7FA;">-->
        <ul class="layui-tab-title tab0" id="layui-tab-all" style="background: #F5F7FA;">
            <!--三级导航（tab）-->
            <li class="layui-this">全部</li>
            <li>检索</li>
        </ul>
        <div class="layui-tab-content content0" style="padding: 2px;">
            <!--tab--全部-->
            <div class="layui-tab-item layui-show">
                <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf">
                    <div class="flex flex-align-center">
                        <div class="layui-form flex flex-align-center" lay-filter="formTest">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-block">
                                    <select name="selType" id="selType" lay-filter="selType">

                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">类型</label>
                                <div class="layui-input-block">
                                    <select name="apisubtype" id="apisubtype" lay-filter="apisubtype">
                                        <option value=""></option>
                                        <option th:each="c : ${functionTypes}" th:value="${c.value}" th:utext="${c.lable}" th:selected="${c.value == apisubtype }">
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item marginleft10 search">
                                <label class="layui-form-label">查询</label>
                                <div class="layui-input-block">
                                    <input type="text" id="searchValue" name="searchValue" placeholder="请输入代码/名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <button type="button" onclick="getTypeSubData()" class="layui-btn layui-btn-sm layui-btn-normal marginleft10">确定</button>
                        </div>
                    </div>
                    <div class="layui-btn-group btns tab1">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='101'>分类维护</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='102'>业务维护</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='103'>新增功能API</button>
                    </div>
                </div>
                <div class="flex flex-jusity-betreen " style="height:100%;width: 100%;background: #F7F7F7;padding: 3px 0;">
                    <div class="backgroundf">
                        <table id="mygrid" lay-filter="mygrid"></table>
                    </div>
                    <div class="backgroundf">
                        <table id="mygrid2" lay-filter="mygrid2"></table>
                    </div>
                </div>
            </div>
            <!--tab--检索-->
            <div class="layui-tab-item">
                <div class="flex flex-align-center flex-jusity-betreen tophead backgroundf" style="border-bottom: 2px solid #F7F7F7;">
                    <div class="flex flex-align-center">
                        <div class="layui-form flex flex-align-center">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分类</label>
                                <div class="layui-input-block">
                                    <select name="selType2" id="selType2" lay-filter="selType2">

                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">类型</label>
                                <div class="layui-input-block">
                                    <select name="apisubtypesearch" id="apisubtypesearch" lay-filter="apisubtypesearch">
                                        <option value=""></option>
                                        <option th:each="c : ${functionTypes}"  th:value="${c.value}" th:utext="${c.lable}" th:selected="${c.value == apisubtype }">
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item marginleft10 search">
                                <label class="layui-form-label">查询</label>
                                <div class="layui-input-block">
                                    <input type="text" id="searchValue2" name="searchValue2" placeholder="请输入代码/名称" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <button type="button" onclick="btn_search()" class="layui-btn layui-btn-sm layui-btn-normal marginleft10">确定</button>
                        </div>
                    </div>
                    <div class="layui-btn-group btns tab1">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" name='exportfunction'>功能导出</button>
                    </div>
                </div>
                <div class="backgroundf">
                    <table id="mygrid3" lay-filter="mygrid3"></table>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    layui.config({
        base: '/static/devtools30/layui-v2.5.6/ext/',// 第三方模块所在目录
        version: 'v1.5.10' // 插件版本号
    }).extend({
        soulTable: 'soulTable/soulTable',
        tableChild: 'soulTable/tableChild',
        tableMerge: 'soulTable/tableMerge',
        tableFilter: 'soulTable/tableFilter',
        excel: 'soulTable/excel',
        dltable: 'treegrid/dltable',
        treeGrid:'treegrid/treeGrid'
    });
    layui.use(['form', 'table', 'jquery','treeGrid','layer','element','soulTable'], function(){
        $(function(){
            $('#iframeAll').height(height - 45);

            getTypeSubData();

            initGrid();

            bindForm();

            initEvent();

        })
    });
    var height = dlCommon.getWinHeight();
    var width=dlCommon.getWinWidth();
    var selTableId="",tabIndex=0;

    function getTypeSubData(){
        var data={
            condition:$("#searchValue").val(),
            flid:$("#selType").val()
        };
        dlCommon.getJSON("/DevtApiMainEntityController/getAllResTreeGrid",data,function(res){
            layui.treeGrid.render({
                id:"mygrid"
                ,elem: '#mygrid'
                ,height: height-36
                , width: width*0.20
                , size: 'sm'//小尺寸的表格
                ,idField:'id'
                ,data:res&&res.data?(res.data):[]
                ,treeId:'id'//树形id字段名称
                ,treeUpId:'pId'//树形父id字段名称
                ,treeShowName:'flmc'//以树形式显示的字段
                ,cols: [
                    [
                        {field:'flmc',width:180, title: '分类名称',},
                        {field:'mc', edit:'text',width:180, title: '业务名称',}
                    ]]
                ,page:false
            });
            //单击表格
            layui.treeGrid.on('row(mygrid)', function(obj){
                selTableId=obj.data.id;
                getFunData();
            });
        });

    }
    function getFunData(){
        if(tabIndex==1){
            //如果是搜索tab  则调用搜索
            btn_search();
            return;
        }
        if(!selTableId){
            return;
        }
        var apisubtype= $("#apisubtype").val();
        var data={
            pid:selTableId,
            apisubtype:apisubtype
        };
        layui.table.reload("mygrid2",{
            url:"/DevtApiSubEntityController/getAll",
            where:data,
            loading:true,
        });
    }
    function initGrid(){

        //第2个实例
        layui.table.render({
            elem: '#mygrid2',
            height: height-69,
            width: width*0.795,
            size: 'sm' //小尺寸的表格
            ,
            loading:false,
            page: false //开启分页
            ,
            cols: [
                [ //表头
                    {field: 'xh22', title: '序号',type:"numbers", width: '8%'},
                    {field: 'lxmc', title: '类型', width: '10%',filter:true},
                    {field: 'datalxmc', title: '结果类型', width: '10%',filter:true},
                    {field: 'mc', title: '名称', sort: true, width: '20%',filter:true},
                    {field: 'dm', title: '代码', sort: true, width: '22%',filter:true},
                    {field: 'created', title: '创建日期', sort: true, width: '15%'},
                    {field: 'right',  title: '操作', align:'center', templet: function(d){
                        var str="";
                        str += '<button type="button" onclick="openTest(\''+d.dm+'\',\''+d.mc+'\',\''+d.lx+'\')" class="layui-btn  layui-btn-xs layui_edit_btn">测试</button>';
                        str += '<button type="button" onclick="openFunOpt(\''+d.id+'\',\''+d.mc+'\',\''+d.lx+'\')" class="layui-btn  layui-btn-xs layui_edit_btn">配置</button>';
                        str += '<button type="button" onclick="openFun(\''+d.id+'\',\''+d.mainid+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">修改</button>';
                        str += '<button type="button" onclick="delfun(\''+d.id+'\')" class="layui-btn layui-btn-danger layui-btn-xs layui_edit_btn">删除</button>';

                        return str;
                    }
                    }
                ]
            ],
            filter: {
                bottom: false
            },
            done: function() {
                // 在 done 中开启
                layui.soulTable.render(this)
            }
        });
        dlCommon.layerTableOn('mygrid2', function(obj){

        });

        layui.table.render({
            id:'mygrid3',
            elem: '#mygrid3',
            height: height-69,
            size: 'sm', //小尺寸的表格
            page: false, //开启分页
            loading:false,
            cols: [
                [ //表头
                    //{field: 'id', title: '分类', width:80, fixed: 'left'}
                    {type: 'checkbox'},
                    {field: 'xh22', title: '序号',type: "numbers", width: '5%'},
                    {field: 'mc', title: '名称', sort: true, width: '15%',filter:true},
                    {field: 'dm', title: '代码', sort: true, width: '18%',filter:true},
                    {field: 'lxmc', title: '类型', width: '6%',filter:true},
                    // {field: 'mainid', title: '分类', sort: true, width: '10%'},
                    {field: 'datalxmc', title: '结果类型',  width: '7%',filter:true},
                    {field: 'cacheflag', title: '缓存', sort: true,width: '5%',templet:'<div>{{isYes(d.cacheflag) }}</div>'},
                    {field: 'maxcachetime', title: '缓存时长',sort: true, width: '7%'},
                    {field: 'sqltype', title: 'sql模式', width: '10%',templet:'<div>{{sqltype(d.sqltype) }}</div>'},
                    {field: 'created', title: '创建日期',sort: true, sort: true, width: '12%'},
                    {field: 'right',  title: '操作', align:'center',  templet: function(d){
                            var str="";

                            str += '<button type="button" onclick="openTest(\''+d.dm+'\',\''+d.mc+'\',\''+d.lx+'\')" class="layui-btn  layui-btn-xs layui_edit_btn">测试</button>';
                            str += '<button type="button" onclick="openFunOpt(\''+d.id+'\',\''+d.mc+'\',\''+d.lx+'\')" class="layui-btn  layui-btn-xs layui_edit_btn">配置</button>';
                            str += '<button type="button" onclick="openFun(\''+d.id+'\',\''+d.mainid+'\')" class="layui-btn layui-btn-normal layui-btn-xs layui_edit_btn">修改</button>';
                            str += '<button type="button" onclick="delfun(\''+d.id+'\')" class="layui-btn layui-btn-danger layui-btn-xs layui_edit_btn">删除</button>';

                            return str;
                        }}
                ]
            ],
            filter: {
                bottom: false
            },
            done: function() {
                // 在 done 中开启
                layui.soulTable.render(this)
            }
    });
        dlCommon.layerTableOn('mygrid3', function(obj){

        });
    }
    function initEvent(){
        $('.tab1>button').on('click', function() {
            var names = $(this)[0].name;
            if(names == '101') {
                dlCommon.layeropen(800,height*0.8,'分类维护','/V_DevtApiTypeController/toPage',{
                    end:function () {
                        bindForm();
                        initGrid();
                        getTypeSubData();
                        getFunData();
                    }
                })
                return;

            }
            if(names == '102') {
                dlCommon.layeropen(800,height*0.8,'业务维护','/DevtApiMainEntityController/toPage',{
                    end:function () {
                        bindForm();
                        initGrid();
                        getTypeSubData();
                        getFunData();
                    }
                })
                return;

            }
            if(names == '103') {
                if(!selTableId){
                    dlCommon.layerInfo("请选择业务类型")
                    return;
                }
                var apisubtype= $("#apisubtype").val();
                var query='?mainid='+selTableId;
                query=query+'&apisubtype='+apisubtype;
                dlCommon.layeropen(800,height*0.8,'功能Api','/V_DevtApiSubEntityController/edit'+query)
                return;

            }
            if(names == 'exportfunction'){
                var checkStatus = layui.table.checkStatus('mygrid3'); //idTest 即为基础参数 id 对应的值
                var tableidlist=checkStatus.data
                var ids=''
                for (var i = 0; i < tableidlist.length; i++) {
                    ids+=tableidlist[i].id+","
                }
                if(ids==''){
                    dlCommon.layerMsg("请先选择功能！")
                    return;
                }
                var url="/DevtApiSubEntityController/export?funtionidlist="+ids;
                window.open(url);
            }

        })

        layui.element.on('tab(tab)', function(data){

           tabIndex=data.index; //得到当前Tab的所在下标

        });
    }
    function openFunOpt(id,mc,lx){
        if(!id){
            return;
        }
        //新增tab
        var id = id;
        var title = mc;
        var element = layui.element;
        if($("[lay-id='"+id+"']").length>0){
            element.tabChange("tab", id);
            return;
        }

        var url="/V_DevtApiSubEntityController/optPage?id="+id;
        if(lx==6){
            url="/V_DevtApiSubEntityController/optPageJson?id="+id;
        }

        element.tabAdd('tab', {
            title: title,
            content: "<iframe class='iframecont' style='border-width: 0px;border-color: #ffffff;border-style: solid;' id='iframeAll' width='99%' src='"+url+"'></iframe>" //支持传入html
            ,
            id: id
        });
        element.tabChange('tab', id);
        /*动态设置iframe高度*/

        $('.iframecont').height(height - 45)
    }

    function openTest(dm,mc,lx){
        // testApiSearch30;
        // testApiUpdate30
        if(lx=='6'){
            window.open("/static/devtools30/templ/test/testApiUpdate30.html?p_dm="+dm);
        }
        if(lx=='5'){
            window.open("/static/devtools30/templ/test/testApiSearch30.html?p_dm="+dm);
        }

    }

    function openFun(id,mainid){

        dlCommon.layeropen(800,height*0.65,'功能Api','/V_DevtApiSubEntityController/edit?id='+id+'&mainid='+mainid,{
            end:function () {
                bindForm();
                initGrid();
                getTypeSubData();
                getFunData();
            }
        })
    }
    function delfun(id){
        if(!id){
            return;
        }
        dlCommon.layerConfirm("是否确定删除该数据？",function(){
            dlCommon.getJSON("/DevtApiSubEntityController/cancel",{id:id},function(res){
                if(!res.success){
                    dlCommon.layerError(res.msg);
                    return;
                }
                getFunData();
            })
        })
    }
    function isYes(val) {
        if (val) {
            return "是";
        } else {
            return "否";
        }
    }
    function sqltype(val) {
        if(val=="replaceconcat"){
            return "替换拼接";
        }
        if(val=="nameprecompile"){
            return "名称预编译";
        }
        if(val=="precompile"){
            return "预编译";
        }
        return "";
    }
    function bindForm(){
        var valueForm=layui.form.val('formTest');
        dlCommon.getJSON("/DevtApiTypeController/getAll",{},function(res){
            var str='<option value="">全部</option>';
            $(res.data).each(function(i,d){
                str+='<option value="'+d.id+'">'+d.mc+'</option>';
            })
            $("#selType").html(str);
            $("#selType2").html(str);
            layui.form.render();
            layui.form.val('formTest',valueForm);
        });

    }
    function btn_search(){
        var apisubtypesearch= $("#apisubtypesearch").val();
        var data={
            dmorsql:$("#searchValue2").val(),
            flid:$("#selType2").val(),
            apisubtype:apisubtypesearch
        };

        layui.table.reload("mygrid3",{
            url:"/DevtApiSubEntityController/getAllByfl",
            where:data,
            loading:true,
        });
    }


</script>
</body>

</html>